<template>
  <div class="card-body">
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <!--      TODO 如果数据库图片路径为null或者''，则显示默认图片-->
      <el-image
          :src="this.imgUrl + info.imgPath"
          class="img">
      </el-image>
      <div class="info" style="padding: 14px;">
        <!--            TODO 通过element的布局组件组合下面的描述和操作按钮的布局-->
        <!--            描述-->
        <div class="desc">
          <el-descriptions :title="info.bankName" size="small" :column="1">
            <el-descriptions-item label="题库类型">{{ info.isCommon === 1 ? '公共题库' : '私人题库' }}</el-descriptions-item>
            <el-descriptions-item label="备注">
              <el-tag size="mini">Java</el-tag>
              <el-tag size="mini">Paython</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!--            操作按钮-->
        <div class="operator">
          <el-button v-if="this.$store.getters.GET_ROLE === 1 || this.$store.getters.GET_ROLE === 3 || this.isCommon === 0" type="text" class="button" @click="edit">编辑</el-button>
          <br/>
          <div class="del">
            <!--TODO 删除题库的时候询问是否将该题库下的题目移动到其他题库，如果否则级联删除该题库下的题目-->
            <el-button v-if="this.$store.getters.GET_ROLE === 1 || this.$store.getters.GET_ROLE === 3 || this.isCommon === 0" type="text" class="button" @click="del">删除</el-button>
          </div>
          <el-button type="text" class="button" @click="enterQuestion">进入题库</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {put} from "@/plugins/axios"

export default {
  name: "card",
  props: ['info', 'isCommon'],
  created() {
    console.log(this.info.imgPath)
  },
  data() {
    const module = '/questionBank'
    return {
      uri: {
        del: module + '/batchDelete'
      }
    }
  },
  methods: {
    enterQuestion() {
      let path = ''
      if (this.$route.path === '/question/commonBank') {
        path = '/question/common'
      } else if (this.$route.path === '/question/privateBank') {
        path = '/question/private'
      }
      // 跳转路由
      this.$router.push({
        path: path,
        query: {
          id: this.info.id
        }
      })
    },
    edit() {
      this.$emit('update:editDialogTitle', '编辑')
      this.$emit('update:editDialogShow', true)
      this.$emit('update:editDialogId', this.info.id)
    },
    del() {
      this.$confirm('此操作将删除该题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          idList: this.info.id
        }
        put(this.uri.del, params, response => {
          if (response.code === 200) {
            this.$emit('getQuestionBankData')
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '删除已取消' : error
        });
      })
    }
  }
}
</script>

<style scoped lang="less">
.card-body {
  height: 550px;
  width: 400px;
  margin: 0 auto;

  .img {
    width: 100%;
    height: 410px
  }

  .info {
    .desc {
      float: left;
      width: 300px;
    }

    .operator {
      float: right;

      .del {
        .el-button--text:focus, .el-button--text {
          color: #ff3d3d;
        }

        .el-button--text:focus, .el-button--text:hover {
          color: #fe6b6b;
        }
      }

    }
  }

  .image {
    margin: 2% auto;
    width: 96%;
    display: block;
  }
}
</style>